<template>
  <div>
    <Common :element="element" :moddle="moddle" :bo="bo" @sync="sync" @write="write">
      <template #detail>
        <slot name="detail" />
        <CollapseItem v-if="multiInstanceVisible" title="Multi Instance">
          <el-form-item slot="content">
            <el-badge :is-dot="Boolean(bo.loopCharacteristics)">
              <el-button @click="showMultiInstance = true">
                {{ $customTranslate('Update') }}
              </el-button>
            </el-badge>
          </el-form-item>
        </CollapseItem>
      </template>
    </Common>
    <MultiInstance
      v-if="showMultiInstance && multiInstanceVisible"
      :moddle="moddle"
      :bo="bo"
      @write="write"
      @close="showMultiInstance = false"
    />
  </div>
</template>

<script>
import Common from '../embbed/Common'
import MultiInstance from '../part/detail/MultiInstance'
import CollapseItem from '../ui/CollapseItem'
import areaHelper from '../../mixins/areaHelper'

export default {
  name: 'Activity',
  components: {
    Common,
    MultiInstance,
    CollapseItem
  },
  mixins: [areaHelper],
  data() {
    return {
      showMultiInstance: false
    }
  },
  computed: {
    multiInstanceVisible() {
      return this.propertyVisible('multiInstance')
    }
  },
  methods: {
    sync() {
      this.$emit('sync')
    }
  }
}
</script>
